<template>
    <scroll-view>
        <div class="noteText">
            <text>过期后未消费不可退款，退款后积分退回优惠卷不退还 </text>
        </div>
        <div class="dividerH"></div>
        <div class="card">
            <text class="titleText grey">{{ params.title }}</text>
            <div class="row" style="align-items: start; width: 100%">
                <image
                    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.cn_mIqJN0Td_0Ono0xMEsQHaLL?rs=1&pid=ImgDetMain"
                    class="image"
                    mode="aspectFill"
                ></image>
                <div style="width: 10px"></div>
                <div class="column" style="width: 100%; align-items: start">
                    <div class="textTitle1">
                        {{ params.goodsType }}
                    </div>
                    <div>
                        <time-place v-if="params.title === ReservationType.activity"></time-place>
                        <TimeReservation
                            v-if="params.title === ReservationType.share"
                        ></TimeReservation>
                    </div>

                    <text class="textMoney111">700￥</text>
                    <div class="row" style="width: 100%; justify-content: space-between">
                        <text class="moneyText12313">到手价600</text>

                        <div>
                            <count-buttons
                                width="20px"
                                v-if="params.title === ReservationType.activity"
                            ></count-buttons>
                            <text v-if="params.title === ReservationType.share">x1</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dividerH"></div>
        <!-- <div class="card">
            <text>订单联系人</text>
            <div class="row" style="justify-content: space-between; width: 100%">
                <div class="textName">姓名:吴叨叨</div>
                <div class="textName">电话:1820560928</div>
            </div>
        </div> -->
        <OrderContact></OrderContact>
        <div class="dividerH"></div>
        <div class="card">
            <div class="row">
                <text>可退金额</text>
                <text class="textF111">￥1000</text>
            </div>
        </div>
        <div class="dividerH"></div>
        <div class="card">
            <div class="textFhsah">退款原因</div>
            <div style="width: 100%">
                <RefundReasonItem
                    v-for="item in reasons"
                    :key="item.id"
                    :id="item.id"
                    :isSelected="item.id === curReasonId"
                    :reason="item.reason"
                    :onSelect="changeReason"
                >
                </RefundReasonItem>
                <uni-easyinput></uni-easyinput>
            </div>
            <div class="dividerH"></div>
            <div style="display: flex; flex-direction: row; flex-wrap: wrap">
                <div v-for="(item, index) in images" :key="index">
                    <div>
                        <image
                            :src="item"
                            style="width: 100px; height: 100px"
                            mode="aspectFill"
                        ></image>
                        <div
                            style="transform: translate(80px, -100px)"
                            @click="
                                () => {
                                    removeImage(item)
                                }
                            "
                        >
                            <uni-icons type="closeempty"></uni-icons>
                        </div>
                    </div>
                </div>
            </div>

            <div class="upload" @click="choosePhoto">
                <div class="column" style="justify-content: center">
                    <uni-icons type="camera" size="20"></uni-icons>

                    <div><text class="textUpload">上传凭证最多9张</text></div>
                </div>
            </div>
        </div>
        <div class="dividerH"></div>

        <div class="row" style="justify-content: center">
            <div class="refundButton" @click="applyRefund">申请退款</div>
        </div>
        <div style="height: 20px"></div>
        <uni-popup ref="pop" type="center">
            <uni-popup-dialog
                mode="base"
                message="成功消息"
                title="申请退订"
                content="退款后订单无法恢复,请确认是否申请"
                :duration="2000"
                :before-close="true"
                @close="close"
                @confirm="confirm"
                ><div style="font-size: 12px; font-weight: bold">
                    <div>退款后订单无法恢复,请确认是否申请?</div>
                    <div class="dividerH"></div>
                    <div class="row" style="justify-content: space-between">
                        <text>退款金额</text>
                        <text>￥999</text>
                    </div>
                </div></uni-popup-dialog
            >
        </uni-popup>
    </scroll-view>
</template>
<script setup lang="ts">
import request from '@/utils/request'
import { defineComponent, reactive, ref, defineProps, getCurrentInstance } from 'vue'
import { onLaunch, onShow, onHide, onLoad } from '@dcloudio/uni-app'
import ReservationType from '@/activityPages/const/reservation'

import { useStore } from 'vuex'
import TimePlace from '@/activityPages/components/time-place.vue'

import OrderContact from '@/activityPages/components/order-contact.vue'
import CountButtons from '@/components/activity/count-buttons.vue'
import RefundReasonItem from '@/activityPages/components/refund-reason-item.vue'
import TimeReservation from '@/activityPages/components/time-reservation.vue'
const images = ref([])
const pop = ref(null)
const curReasonId = ref('0')

function removeImage(image) {
    images.value = images.value.filter((item) => item !== image)
}
const reasons = ref([
    {
        id: '0',
        reason: '需更改出行日期',
        isSelected: false
    },
    {
        id: '1',
        reason: '信息填写错误重买',
        isSelected: false
    },
    {
        id: '2',
        reason: '其他',
        isSelected: false
    }
])

function changeReason(item) {
    console.log('radioChange', item)
    curReasonId.value = item
}

function applyRefund() {
    pop.value.open()
}

function close() {
    pop.value.close()
}

function confirm() {
    pop.value.close()
    //todo
}
function choosePhoto() {
    uni.chooseImage({
        count: 1, //最多可以选择的图片张数，默认9
        // sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
        // sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
        success(res) {
            console.log('选择图片完成', res)
            // 调用上传图片的接口
            // _this.uploadPhoto(res.tempFilePaths)
            images.value = [...images.value, ...res.tempFilePaths]
        },
        fail(err) {
            console.log('失败', err)
        },
        complete() {
            console.log('结束')
        }
    })
}

const params = ref({})
onLoad((e) => {
    params.value = e
    console.log('退款页面', e)
})
</script>

<style scoped lang="scss">
@import url('@/activityPages/style/card.css');
.refundButton {
    width: 288px;
    height: 37px;
    line-height: 20px;
    border-radius: 10px;
    background-color: rgba(17, 154, 255, 1);
    color: rgba(240, 239, 239, 1);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.textUpload {
    line-height: 14px;
    color: rgba(153, 153, 153, 1);
    font-size: 10px;
    text-align: left;
    font-family: PingFangSC-regular;
}
.upload {
    width: 100%;
    height: 49px;
    line-height: 20px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    border: 1px solid rgba(187, 187, 187, 1);
}
.textFhsah {
    color: rgba(153, 153, 153, 1);
    font-size: 14px;
}
.textF111 {
    font-size: 18;
    font-weight: bold;
}
.textName {
    color: rgba(153, 153, 153, 1);
    font-size: 10px;
}
.moneyText12313 {
    color: rgba(236, 94, 65, 1);
    font-size: 8px;
}

.textMoney111 {
    color: rgba(232, 89, 47, 1);
    font-size: 18px;
}

.textTitle1 {
    color: rgba(16, 16, 16, 1);
    font-size: 12px;
    font-weight: bold;
}

.align-left {
    align-items: left;
}

.noteText {
    line-height: 20px;
    background-color: rgba(255, 186, 0, 0.45);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    //text-align: center;
    font-family: Roboto;
    padding: 15px;
}

.image {
    width: 106px;
    height: 85px;
}
</style>